<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->

<template>
  <!-- 查询表单 -->
  <SearchForm
    v-show="isShowSearch"
    :search="_search"
    :reset="_reset"
    :columns="searchColumns"
    :search-param="searchParam"
    :search-col="searchCol"
  />

  <!-- 表格主体 -->
  <div class="card table-main" :class="[isFullscreen ? 'active-isFullscreen' : '']">
    <!-- 表格头部 操作按钮 -->
    <div class="table-header">
      <div class="header-button-lf">
        <slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
      </div>
      <div v-if="toolButton" class="header-button-ri">
        <slot name="toolButton">
          <el-button v-if="showToolButton('fullscreen')" circle @click="isFullscreen = !isFullscreen">
            <i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon"></i>
          </el-button>
          <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
          <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
          <el-button
            v-if="showToolButton('search') && searchColumns?.length"
            :icon="Search"
            circle
            @click="isShowSearch = !isShowSearch"
          />
        </slot>
      </div>
    </div>
    <!-- 表格主体 -->
    <el-table
      ref="tableRef"
      :data="processTableData"
      :border="border"
      :row-key="rowKey"
      :row-class-name="dataGridRowClass"
      :span-method="objectSpanMethod"
      :row-style="rowStyle"
      v-bind="$attrs"
      v-tableWaterMarker="{ isHide: !isTableWaterMarker }"
      v-loading="loading"
      @selection-change="selectionChange"
      @cell-click="cellClick"
      @cell-dblclick="cellDblclick"
    >
      <!-- 默认插槽 -->
      <slot />
      <template v-for="item in tableColumns" :key="item">
        <!-- selection || radio || index || expand || sort -->
        <el-table-column
          v-if="item.type && columnTypes.includes(item.type)"
          v-bind="item"
          :align="item.align ?? 'center'"
          :reserve-selection="item.type == 'selection' && item.reserveSelection"
        >
          <template #default="scope">
            <!-- expand -->
            <template v-if="item.type == 'expand'">
              <component :is="item.render" v-bind="scope" v-if="item.render" />
              <slot v-else :name="item.type" v-bind="scope" />
            </template>
            <!-- radio -->
            <el-radio v-if="item.type == 'radio'" v-model="radio" :label="scope.row[rowKey]">
              <i></i>
            </el-radio>
            <!-- sort -->
            <el-tag v-if="item.type == 'sort'" class="move">
              <el-icon> <DCaret /></el-icon>
            </el-tag>
          </template>
        </el-table-column>
        <!-- other -->
        <TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
          <template v-for="slot in Object.keys($slots)" #[slot]="scope">
            <slot :name="slot" v-bind="scope" />
          </template>
        </TableColumn>
      </template>
      <!-- 插入表格最后一行之后的插槽 -->
      <template #append>
        <slot name="append" />
      </template>
      <!-- 无数据 -->
      <template #empty>
        <div class="table-empty">
          <slot name="empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>{{ _transitionLanguages('basic', 'noData') }}</div>
          </slot>
        </div>
      </template>
    </el-table>
    <!-- 分页组件 -->
    <slot name="pagination">
      <Pagination
        v-if="pagination"
        :pageable="pageable"
        :handle-size-change="handleSizeChange"
        :handle-current-change="handleCurrentChange"
      />
      <el-pagination v-if="!pagination && sumTotal" :total="processTableData.length" layout="total" />
    </slot>
  </div>
  <!-- 列设置 -->
  <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
</template>

<script setup lang="ts" name="ProTable">
import { ref, watch, provide, onMounted, unref, computed } from 'vue';
import { ElTable } from 'element-plus';
import { useSelection } from '@/hooks/useSelection';
import { BreakPoint } from '@/components/Grid/interface';
import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
import { Refresh, Operation, Search } from '@element-plus/icons-vue';
import { handleProp } from '@/utils';
import SearchForm from '@/components/SearchForm/index.vue';
import Pagination from './components/Pagination.vue';
import ColSetting from './components/ColSetting.vue';
import TableColumn from './components/TableColumn.vue';
import Sortable from 'sortablejs';
import { SpanMethodProps } from '@/interface/public';

export interface ProTableProps {
  columns: ColumnProps[]; // 列配置项  ==> 必传
  sumTotal?: boolean; // 显示总条数
  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
  requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
  requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
  requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
  dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
  changeSearchParams?: (params: any) => any; // 查询数据前最后一次对参数进行修改 ==> 非必传
  spanMethod?: (row: SpanMethodProps) => { rowspan: number; colspan: number }; // 表格合并函数
  isTableWaterMarker?: true; // 表格内部是否显示水印
  tableMergeColumn?: Array<number>;
  title?: string; // 表格标题 ==> 非必传
  pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
  initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
  border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
  toolButton?: ('refresh' | 'setting' | 'search' | 'fullscreen')[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
  rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 3, lg: 4, xl: 4 }
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  columns: () => [],
  requestAuto: true,
  pagination: true,
  sumTotal: true,
  isTableWaterMarker: true,
  initParam: {},
  border: true,
  toolButton: true,
  rowKey: 'id',
  searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 4 })
});

const isFullscreen = ref(false);

// table 实例
const tableRef = ref<InstanceType<typeof ElTable>>();

// column 列类型
const columnTypes: TypeProps[] = ['selection', 'radio', 'index', 'expand', 'sort'];

// 是否显示搜索模块
const isShowSearch = ref(true);

// 控制 ToolButton 显示
const showToolButton = (key: 'refresh' | 'setting' | 'search' | 'fullscreen') => {
  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
};

// 单选值
const radio = ref('');

// 表格多选 Hooks
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  searchInitParam,
  loading,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange
} = useTable(
  props.requestApi,
  props.initParam,
  props.pagination,
  props.dataCallback,
  props.requestError,
  props.changeSearchParams
);
// 清空选中数据列表
const clearSelection = () => tableRef.value!.clearSelection();

const toggleRowSelection = (row: any, flag = true) => {
  tableRef.value!.toggleRowSelection(row, flag);
};

// 初始化表格数据 && 拖拽排序
onMounted(() => {
  dragSort();
  // 直接调用查询方法默认值没有带上  使用重置获取默认值
  props.requestAuto && reset();
  props.data && (pageable.value.total = props.data.length);
});

// 语言转换
const _transitionLanguages = (v: string, l: string): string => {
  return transitionLanguages(v, l);
};

// 处理表格数据
const processTableData = computed(() => {
  if (!props.data) return tableData.value;
  return props.data;
});

// 监听页面 initParam 改化，重新获取表格数据
watch(
  () => props.initParam,
  () => {
    search();
  },
  { deep: true }
);

// 接收 columns 并设置为响应式
const tableColumns = computed(() => props.columns);

// 扁平化 columns
const flatColumns = computed(() => flatColumnsFunc(tableColumns.value));

// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
const enumMap = ref(new Map<string, { [key: string]: any }[]>());

const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
  if (!enumValue) return;

  // 如果当前 enumMap 存在相同的值 return
  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return;

  // 当前 enum 为静态数据，则直接存储到 enumMap
  if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!));
  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap

  const data = await enumValue();

  enumMap.value.set(prop!, data);
};

// 注入 enumMap
provide('enumMap', enumMap);

// 扁平化 columns 的方法
const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
  columns.forEach(async col => {
    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
    flatArr.push(col);

    // column 添加默认 isShow && isFilterEnum 属性值
    col.isShow = col.isShow ?? true;
    if (col.permissionCode) {
      col.isShow = useAuthStore().authButtonListGet.includes(col.permissionCode);
    }
    // col.permissionCode = col.permissionCode ? "" : false;
    col.isFilterEnum = col.isFilterEnum ?? true;

    // 设置 enumMap
    await setEnumMap(col);
  });
  return flatArr.filter(item => !item._children?.length);
};

// 过滤需要搜索的配置项 && 排序
const searchColumns = computed(() => {
  return flatColumns.value
    ?.filter(item => (item.search?.el || item.search?.render) && !item.search?.hide)
    .sort((a, b) => a.search!.order! - b.search!.order!);
});

// 设置 搜索表单默认排序 && 搜索表单项的默认值
searchColumns.value?.forEach((column, index) => {
  column.search!.order = column.search?.order ?? index + 2;
  const key = column.search?.key ?? handleProp(column.prop!);

  // 设置默认参数
  const defaultValue = column.search?.defaultValue;
  searchInitParam.value[key] = defaultValue ?? '';
  searchParam.value[key] = defaultValue ?? '';
});

// 列设置 ==> 需要过滤掉不需要设置的列
const colRef = ref();
const colSetting = tableColumns!.value.filter(item => {
  const { type, prop, isShow } = item;
  return !columnTypes.includes(type!) && prop !== 'operation' && isShow;
});
const openColSetting = () => colRef.value.openColSetting();

// 定义 emit 事件
const emit = defineEmits<{
  search: [];
  reset: [];
  dargSort: [{ newIndex?: number; oldIndex?: number }];
  cellClick: [{ row: any }];
  cellDblclick: [{ row: any }];
}>();

const _search = () => {
  search();
  emit('search');
};

const _reset = () => {
  reset();
  emit('reset');
};

// 拖拽排序
const dragSort = () => {
  const tbody = document.querySelector('.el-table__body-wrapper tbody') as HTMLElement;
  Sortable.create(tbody, {
    handle: '.move',
    animation: 300,
    onEnd({ newIndex, oldIndex }) {
      const [removedItem] = processTableData.value.splice(oldIndex!, 1);
      processTableData.value.splice(newIndex!, 0, removedItem);
      emit('dargSort', { newIndex, oldIndex });
    }
  });
};
let clickRow = ref();
const isSelect = computed(() => props.columns.find(c => c.type && c.type === 'selection'));
// 表格行点击
const cellClick = (row: any, column: any) => {
  if (column?.label === 'operation') return;

  clickRow.value = row;

  // 表格多选时设置点击表格行可选中数据
  if (isSelect.value) {
    toggleRowSelection(row, !selectedListIds.value.includes(row.id));
  }
  emit('cellClick', row);
};

/**
 * @description: 表格双击
 * @param {*} row
 * @param {*} column
 * @return {*}
 */
const cellDblclick = (row: any, column: any) => {
  if (column?.label === 'operation') return;

  clickRow.value = row;
  emit('cellDblclick', row);
};

// 设置单行点击样式
const dataGridRowClass = ({ row }: { row: any }) => {
  console.log('===========');

  if (row?.id && clickRow.value?.id === row?.id) {
    return 'active-box';
  }
  return '';
};

/**
 * @description: 合并行
 * @param {SpanMethodProps} params
 */
const objectSpanMethod = (params: SpanMethodProps) => {
  if (props.spanMethod) return props.spanMethod(params);
  if (!props.tableMergeColumn?.length) return;

  const { columnIndex, row } = params;
  if (props.tableMergeColumn.includes(columnIndex)) {
    return {
      rowspan: row.rowSpan,
      colspan: 1
    };
  }
};

let rowStyle = {
  backgroundColor: 'transparent'
};

// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
defineExpose({
  element: tableRef,
  tableData: processTableData,
  originData: tableData,
  radio,
  pageable,
  searchParam,
  searchInitParam,
  clickRow,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  clearSelection,
  toggleRowSelection,
  enumMap,
  isSelected,
  selectedList,
  selectedListIds
});
</script>
